import React, { Component } from 'react'
import Styled from 'styled-components'
import ValidDatasetName from 'graphql/dataset/validDatasetName.graphql'
import NewDataset from 'graphql/dataset/newDataset.graphql'
import GetServers from 'graphql/dataset/getDataServers.graphql'
import { ValidType } from 'components/validForm'
import {
  Form as FormTable,
  Section as TableSection,
  Input,
  Switch,
  Submit,
} from 'components/tableForm'

const getVariables = values => ({
  fileServerId: values.fileServer.value,
  fileType: values.fileType.value,
  name: values.name.value,
})

const StyledContent = Styled.div`
  padding-top: 30px;
  overflow: scroll; 
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
  width:100%;
`

export default class newDataset extends Component {
  componentDidMount = () => {}

  render() {
    const { org } = this.props
    const orgName = org.owner_object.name
    const orgId = org.owner_object.id
    const mailRule = [
      {
        type: ValidType.REGULAR,
        value: /^[\s\S]*.*[^\s][\s\S]*$/,
        errorMessage: '数据集名称不能为空',
      },
      {
        type: ValidType.REGULAR,
        value: /^[\u4E00-\u9FA5A-Za-z0-9_]+$/,
        errorMessage: '数据集名称由中文、英文数字包括下划线',
      },
      {
        type: ValidType.REMOTE,
        value: {
          query: ValidDatasetName,
          params: { ownerId: orgId },
        },
        errorMessage: '该名称已经存在于你的账户',
        getResult: re => re.dataset.length === 0,
      },
    ]
    return (
      <StyledContent>
        <FormTable>
          <TableSection header="新建数据集">
            <Input
              name="name"
              header="数据集名称"
              description="存储空间名称可包含 字母、数字、中划线。"
              rules={mailRule}
            />
            <Switch
              name="public"
              header="隐私设置"
              description="私有空间不会被其他人看见"
              options={[{ name: 'public', value: '公开' }, { name: 'private', value: '私有' }]}
            />
            <Switch
              name="fileServer"
              header="选择存储文件服务器"
              description="不同文件服务器可以对应不同主机"
              query={{
                query: GetServers,
                variables: { ownerId: orgId },
                getData: (data) => {
                  if (!data && !data.file_server) return []
                  return data.file_server.map(server => ({ name: server.id, value: server.name }))
                },
              }}
            />
            <Switch
              name="fileType"
              header="文件类型"
              description="私有空间不会被其他人看见"
              options={[
                { name: 'image', value: '图像' },
                { name: 'text', value: '文本' },
                { name: 'video', value: '视频' },
                { name: 'audio', value: '音频' },
              ]}
            />
          </TableSection>
          <Submit
            submit={{
              text: '提交',
              variables: {},
              getVariables,
              mutation: NewDataset,
              success: (data) => {
                if (data && data.insert_dataset && data.insert_dataset.returning) {
                  return `/dataset/${orgName}/${data.insert_dataset.returning[0].name}`
                }
                return '/dataset'
              },
            }}
            cancle={{ text: '取消', url: `/org/${orgName}/dataset` }}
            redirect
          />
        </FormTable>
      </StyledContent>
    )
  }
}
